{% extends 'base.html' %}
{% load notification_tags %}

{% block title %}{{ title }} - {{ block.super }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0">我的通知</h4>
                {% if user|has_any_role:'principal,grade_leader,homeroom_teacher' %}
                <a href="{% url 'core:send_notification' %}" class="btn btn-primary btn-sm">
                    <i class="bi bi-envelope-plus"></i> 发送新通知
                </a>
                {% endif %}
            </div>
            <div class="card-body">
                {% if notifications %} 
                <div class="list-group">
                    {% for notification in notifications %}
                    <a href="{% url 'core:notification_detail' notification.id %}" class="list-group-item list-group-item-action {% if not notification.is_read %}list-group-item-primary{% endif %}">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">{% if not notification.is_read %}<i class="bi bi-bell me-2"></i>{% else %}<i class="bi bi-bell-slash me-2 text-muted"></i>{% endif %}{{ notification.title }}</h5>
                            <small class="text-muted">{{ notification.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                        <p class="mb-1">{{ notification.content|truncatechars:100 }}</p>
                        <small>来自: {{ notification.sender.username }}</small>
                        {% if notification.task %}
                        <small class="ms-2 text-success">(关联待办: {{ notification.task.title }})</small>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
                {% else %}
                <div class="alert alert-info text-center" role="alert">
                    <i class="bi bi-inbox"></i> 您暂无通知
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}